<template>
  <div id="personal">
    <div class="info">
      <div class="header">
        修改基本信息
      </div>
      <el-form 
    inline 
    :model="personalForm" 
    class="demo-form-inline"
  >
  <el-form-item label="性别">
    <el-select v-model="personalForm.sex" placeholder="选择性别">
      <el-option label="女" value="女"></el-option>
      <el-option label="男" value="男"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="血型">
    <el-input v-model="personalForm.blood" placeholder="输入血型"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model="personalForm.age" placeholder="输入年龄"></el-input>
  </el-form-item>
  <el-form-item label="故乡">
    <el-input v-model="personalForm.home" placeholder="输入故乡"></el-input>
  </el-form-item>
  <el-form-item label="出生">
    <el-input v-model="personalForm.birth" placeholder="输入出生的月日"></el-input>
  </el-form-item>
  <el-form-item label="职业">
    <el-input v-model="personalForm.occupation" placeholder="输入当前从事的职业"></el-input>
  </el-form-item>
  <el-form-item label="星座">
    <el-input v-model="personalForm.constellation" placeholder="输入星座"></el-input>
  </el-form-item>
   <el-form-item label="公司名称">
    <el-input v-model="personalForm.corporate" placeholder="输入当前公司的名称"></el-input>
  </el-form-item>
    <el-form-item label="现居地">
    <el-input v-model="personalForm.residence" placeholder="输入当前的住处"></el-input>
  </el-form-item>
  <el-form-item label="公司所在地">
    <el-input v-model="personalForm.country" placeholder="输入当前的公司所在地"></el-input>
  </el-form-item>
  <el-form-item label="婚姻状况">
    <el-input v-model="personalForm.marital" placeholder="输入当前的婚姻状况"></el-input>
  </el-form-item>
  <el-form-item label="详细地址">
    <el-input v-model="personalForm.address" placeholder="输入当前的详细地址"></el-input>
  </el-form-item>
      </el-form>
      <el-button type="primary" @click="updateInfo(0)">修改信息</el-button>
    </div>
    <div class="info">
      <div class="header">
        修改其他信息
      </div>
      <el-form 
        inline 
        :model="moreForm" 
        class="demo-form-inline"
      >
        <el-form-item label="喜欢的颜色">
          <el-input v-model="moreForm.color" placeholder="输入喜欢的颜色"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的明星">
          <el-input v-model="moreForm.star" placeholder="输入喜欢的明星"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的运动">
          <el-input v-model="moreForm.motion" placeholder="输入喜欢的运动"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的饮料">
          <el-input v-model="moreForm.drinks" placeholder="输入喜欢的饮料"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的数值">
          <el-input v-model="moreForm.num" placeholder="喜欢的数值"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的景点">
          <el-input v-model="moreForm.spot" placeholder="输入喜欢的景点"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的歌曲">
          <el-input v-model="moreForm.song" placeholder="输入喜欢的歌曲"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的装扮">
          <el-input v-model="moreForm.dress" placeholder="输入喜欢的装扮"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的美食">
          <el-input v-model="moreForm.foods" placeholder="输入喜欢的美食"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的电影">
          <el-input v-model="moreForm.film" placeholder="输入喜欢的电影"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的动漫">
          <el-input v-model="moreForm.comic" placeholder="输入喜欢的动漫"></el-input>
        </el-form-item>
        <el-form-item label="喜欢的宠物">
          <el-input v-model="moreForm.pets" placeholder="输入喜欢的宠物"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"  @click="updateInfo(1)">修改信息</el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Personal',
  data(){
    return{
      // 基本信息
      personalForm:{
        // 性别
        sex:"女",  
        // 血型
        blood:"",
        // 年龄
        age:"",
        // 故乡
        home:"",
        // 出生
        birth:"",
        // 职业
        occupation:"",
        // 星座
        constellation:"",
        // 公司名字
        corporate:"",
        // 现居地
        residence:"",
        // 公司所在地 
        country:"",
        // 婚姻状况
        marital:"",
        // 详细地址
        address:""
      },
      // 其他信息
      moreForm:{
        // 喜欢的颜色
        color:"",
        // 喜欢的明星
        star:"",
        // 喜欢的运动
        motion:"",
        // 喜欢的饮料
        drinks:"",
        // 喜欢的数值
        num:"",
        // 喜欢的景点
        spot:"",
        // 喜欢的歌曲
        song:"",
        // 喜欢的装扮
        dress:"",
        // 喜欢的美食
        foods:"",
        // 喜欢的电影
        film:"",
        // 喜欢的动漫
        comic:"",
        // 喜欢的宠物
        pets:""

      }
    }
  },
  methods:{
    // 修改基本信息
    async updateInfo(num){
      if(!num){ 
        let {data} = await this.$axios.post("/admin/personal/update",{
          personalForm:this.personalForm,
          type:0
        })
         if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
      }else{
        let {data} = await this.$axios.post("/admin/personal/update",{
          moreForm:this.moreForm,
          type:1
        })
         if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
      }
    },
    // 获取信息
    async getInfo(){
      let {data} = await this.$axios.get("/admin/personal/getInfo")
      if(data.code) return this.$message.warning(data.mes)
      this.personalForm = data.data
      this.moreForm = data.data
    }
  },
  created(){
    this.getInfo()
  }
}
</script>

<style scoped lang='less'>
#personal{
  .info{
    margin-top: 40px;
    &:first-child{
      margin-top: 0px;
    }
    .header{
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      border-bottom:1px solid rgb(214, 214, 214);
      margin-bottom: 20px;
      color: palevioletred;
      font-weight: bold;
    }
    &:last-child{
      .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
    }
  }
}
</style>